<script lang="ts">
import { Vue, Prop, Component } from "vue-property-decorator";
import resultList from "./resultList.vue";
import selectConditionGeometry from "./selectConditionGeometry.vue";
import { operation } from "@/operation";
// import { esri, operation, coordinateChange, terraformer } from "@/esri";
import moment from "moment";
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import WKT from "ol/format/WKT";
import { message } from "ant-design-vue";

@Component({ components: { resultList, selectConditionGeometry } })
export default class dataSearchMenu extends Vue {
  @Prop() selectType!: string;
  @Prop() map: any;

  showMask = false;
  created() {
    this.fixMonth(3);
  }
  mounted() {
    this.celue1Arr = this.celueArr;
    this.celue2Arr = this.celueArr;
    this.celue3Arr = this.celueArr;
    this.celueFormate();
  }

  celueFormate() {
    this.celue2Arr = this.celueArr.filter(
      (item: any) => item.value != this.condition.celue1
    );
    this.celue3Arr = this.celueArr.filter(
      (item: any) =>
        item.value != this.condition.celue1 &&
        item.value != this.condition.celue2
    );
  }

  resetCondition() {}

  test() {
    console.log(this.map);
  }
  public condition: any = {
    geometry: "",
    cloud: [0, 100],
    solution: [0, 5],
    celue1: "A",
    celue2: "B",
    celue3: "C",
    time: [],
    cloudDetect: false,
  };
  locate(rings: any, center: any) {
    this.condition.geometry = new Polygon(rings).transform(
      "EPSG:4326",
      "EPSG:3857"
    );
    operation.addGraphicsToLayer(operation.map, {
      clearBefore: true,
      geometrys: [this.condition.geometry],
      layerId: "drawLayer",
      style: operation.createSymbol("#ffffff00", 1, "#ff0000ff"),
    });
    operation.map.getView().fit(this.condition.geometry, {
      padding: [100, 10, 100, 10],
      duration: 400,
    });
  }
  draw(type: string) {
    operation
      .drawGraphic({ geometryType: type, map: operation.map })
      .then((geo) => {
        operation.addGraphicsToLayer(operation.map, {
          clearBefore: true,
          geometrys: [geo],
          layerId: "drawLayer",
          style: operation.createSymbol("#ffffff00", 1, "#ff0000ff"),
        });

        this.condition.geometry = geo;
      });
  }
  fixMonth(month: number) {
    let t = new Date();
    let [Y, M, D] = [t.getFullYear(), t.getMonth() + 1, t.getDate()];
    let momentToday = moment(`${Y}/${M}/${D} 23:59:59`);
    if (M > month) {
      M = M - month;
    } else {
      Y = Y - 1;
      M = M - month + 12;
    }
    this.condition.time = [moment(`${Y}/${M}/${D}`), momentToday];
  }
  celueArr: any = [
    { value: "A", name: "影像质量" },
    { value: "B", name: "时间" },
    { value: "C", name: "分辨率" },
  ];
  celue1Arr = [];
  celue3Arr = [];
  celue2Arr = [];
  search() {
    if (!this.condition.geometry) {
      message.warning("未选择搜索范围");
      return;
    }
    this.showMask = true;
    const geometry = new WKT().writeGeometry(this.condition.geometry, {
      dataProjection: "EPSG:4326",
      featureProjection: "EPSG:3857",
    });
    const ref: any = this.$refs.resultList;
    const params = {
      acquireTimeEnd: this.condition.time[1].valueOf(),
      acquireTimeStart: this.condition.time[0].valueOf(),
      cloudPercentMax: this.condition.cloud[1],
      cloudPercentMin: this.condition.cloud[0],
      geometry,
      resolutionMax: this.condition.solution[1],
      resolutionMin: this.condition.solution[0],
      cloudDetect: this.condition.cloudDetect ? 1 : 0,
      sort:
        this.condition.celue1 +
        "," +
        this.condition.celue2 +
        "," +
        this.condition.celue3,
    };
    ref.search(params, () => {
      this.mainTab = "2";
      this.showMask = false;
    });
  }
  mainTab = "1";
  changcelue(f: string) {
    this.celueFormate();
    if (f == "celue1") {
      this.condition.celue2 = (this.celue2Arr[0] as any).value;
    }
    if (f == "celue2") {
      this.condition.celue3 = (this.celue3Arr[0] as any).value;
    }
  }
}
</script>

<template>
  <div id="dataSearchMenu">
    <div id="menuInnderBox">
      <a-tabs v-model="mainTab" style="text-align:left">
        <a-tab-pane key="1" tab="搜索条件">
          <div id="conditionGeometry">
            <selectConditionGeometry @locate="locate" @draw="draw" :mode="selectType" />
          </div>
          <div id="otherCondition">
            <div>
              <span>云量：</span>
              <a-slider range v-model="condition.cloud" />
            </div>
            <div>
              <span>分辨率：</span>
              <a-slider range :max="5" v-model="condition.solution" />
            </div>
            <div>
              <span>时相：</span>
              <a-range-picker v-model="condition.time"></a-range-picker>
            </div>
            <div>
              <span
                class="month"
                v-for="(item, index) of [1, 3, 6]"
                :key="index"
                @click="fixMonth(item)"
              >近{{ item }}个月</span>
            </div>
            <div v-if="selectType=='area'">
              <div>搜索策略：</div>
              <div>
                <span class="celue">主策略：</span>
                <a-select
                  style="width: 190px"
                  v-model="condition.celue1"
                  @change="changcelue('celue1')"
                >
                  <a-select-option
                    v-for="(item, index) of celue1Arr"
                    :key="index"
                    :value="item.value"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </div>
              <div>
                <span class="celue">次策略1：</span>
                <a-select
                  style="width: 190px"
                  v-model="condition.celue2"
                  @change="changcelue('celue2')"
                >
                  <a-select-option
                    v-for="(item, index) of celue2Arr"
                    :key="index"
                    :value="item.value"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </div>
              <div>
                <span class="celue">次策略2：</span>
                <a-select
                  style="width: 190px"
                  v-model="condition.celue3"
                  @change="changcelue('celue3')"
                >
                  <a-select-option
                    v-for="(item, index) of celue3Arr"
                    :key="index"
                    :value="item.value"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </div>
            </div>
            <div>
              <a-checkbox v-model="condition.cloudDetect">是否进行云检测</a-checkbox>
            </div>
          </div>
          <div id="searchButton">
            <a-button type="primary" @click="search()">开始搜索</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="结果列表" force-render>
          <resultList ref="resultList" :map="map" />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div id="wattingMask" v-if="showMask">
      <div class="content">
        <a-spin tip="检索中，请稍后..."></a-spin>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
#dataSearchMenu {
  width: 400px;
  height: 100%;
  overflow: hidden;

  #menuInnderBox {
    width: 400px;
    height: 100%;
    background-color: #fff;
  }
  #conditionGeometry {
    overflow: hidden;
  }
  #otherCondition {
    line-height: 40px;
    width: 280px;
    margin: 0 auto;
    margin-bottom: 25px;
    .ant-calendar-picker,
    .ant-slider {
      width: calc(100% - 80px);
      display: inline-block;
    }
    span {
      float: left;
      display: inline-block;
      width: 64px;
      text-align: right;
      margin-right: 2px;
    }
    span.month {
      float: none;
      text-align: center;
      cursor: pointer;
    }
    span.month:hover {
      color: #72b983;
    }
    span.celue {
      width: 70px;
    }
  }
  #searchButton {
    text-align: center;
  }
  #wattingMask {
    position: absolute;
    top: 0;
    width: 400px;
    height: 100%;
    background-color: rgba(#000, 0.4);
    z-index: 999;
    .content {
      position: absolute;
      top: 50%;
      height: 100px;
      width: 100%;
      background-color: #fff;
      line-height: 100px;
      text-align: center;
      border-radius: 4px;
    }
  }
}
</style>
